<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item>首页</el-breadcrumb-item>
      <el-breadcrumb-item>我的店铺</el-breadcrumb-item>
      <el-breadcrumb-item>店铺权益</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片区域 -->
    <el-card>
      <div v-for="(item,index) in rightList" :key="index">
        <div class="vip-box">
          <p>
            <span>{{item.right_name}}</span>
            <span class="buy" v-if="item.is_buy">已购买</span>
          </p>
          <p class="number">
            <span>可上商品数量:</span>
            <b class="goods-number">{{item.goods_number}}</b>
            <span>件</span>
          </p>
          <p class="number">
            <span>￥</span>
            <b class="price">{{item.right_price}}</b>
            <span>元/年</span>
            <el-button size="small" @click="toBuy(item)">{{item.is_buy?'续费':'购买'}}</el-button>
          </p>
        </div>
        <div class="time" v-if="item.is_buy">本权益使用时间还剩{{item.use_time}}天</div>
      </div>
    </el-card>
    <el-dialog
      :visible.sync="dialogVisible"
      :title="rightDialog.is_buy ? `会员还有${rightDialog.use_time}天到期` : '购买会员'"
      width="25%"
    >
      <div class="buy-vip">
        <div :class="isSelect1?'baoyue is-select':'baoyue'" @click="selectVip(1)">
          <p>
            <span class="years">1年权益</span>
          </p>
          <p>
            <span>
              <i>￥</i>
              <b class="price">{{rightDialog.right_price}}</b>
            </span>
          </p>
          <p>
            <span>{{rightDialog.right_price}}元/年</span>
          </p>
        </div>
        <div :class="isSelect2?'baoyue is-select':'baoyue'" @click="selectVip(2)">
          <p>
            <span>
              <i>￥</i>
              <b class="price">{{(rightDialog.right_price * num).toFixed(1)}}</b>
            </span>
          </p>
          <p>
            <span>{{rightDialog.right_price}}元/年</span>
          </p>
          <p class="num">
            <el-input-number v-model="num" @change="handleChange" :min="2" :max="10" label="描述文字"></el-input-number>
          </p>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="buyVipBtn" :disabled="disabled">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getItem, setItem } from '@/components/goods/utils/stroge.js'
import '@/mock/lwbmock.js'
export default {
  name: '',
  components: {},
  props: {},
  data () {
    return {
      rightList: getItem('RIGHTLIST') || [],
      dialogVisible: false,
      rightDialog: {},
      num: 2,
      isSelect1: false,
      isSelect2: false,
      disabled: false
    }
  },
  computed: {},
  watch: {},
  created () {
    if (!getItem('RIGHTLIST')) {
      this.getRightList()
    }
  },
  mounted () {

  },
  methods: {
    async getRightList () {
      const { data } = await this.axios.get('/rights')
      this.rightList = data.list
      setItem('RIGHTLIST', this.rightList)
    },
    toBuy (item) {
      this.num = 2
      this.dialogVisible = true
      this.disabled = true
      this.isSelect1 = false
      this.isSelect2 = false
      this.rightDialog = item
      this.title = item.is_buy ? `会员还有${item.use_time}天到期` : '购买会员'
      setItem('RIGHTLIST', this.rightList)
    },
    selectVip (id) {
      if (id === 1) {
        this.isSelect2 = false
        this.isSelect1 = true
        this.disabled = false
      } else if (id === 2) {
        this.isSelect2 = true
        this.isSelect1 = false
        this.disabled = false
      }
    },
    handleChange (val) {
      this.num = val
    },
    buyVipBtn () {
      if (this.rightDialog.use_time !== 0) {
        if (this.isSelect1) {
          this.rightDialog.use_time += 365
          this.dialogVisible = false
        } else if (this.isSelect2) {
          this.rightDialog.use_time += 365 * this.num
          this.dialogVisible = false
        }
      } else {
        this.rightDialog.is_buy = true
        if (this.isSelect1) {
          this.rightDialog.use_time += 365
          this.dialogVisible = false
        } else if (this.isSelect2) {
          this.rightDialog.use_time += 365 * this.num
          this.dialogVisible = false
        }
      }
      setItem('RIGHTLIST', this.rightList)
    }
  }
}
</script>

<style scoped lang="less">
.el-input-number__decrease:hover:not(.is-disabled)
  ~ .el-input
  .el-input__inner:not(.is-disabled),
.el-input-number__increase:hover:not(.is-disabled)
  ~ .el-input
  .el-input__inner:not(.is-disabled) {
  border-color: none;
}
b {
  font-weight: 400;
}
p {
  margin: 0;
}
i {
  font-style: normal;
}
.buy-vip {
  display: flex;
  justify-content: space-around;
  .baoyue {
    width: 150px;
    height: 180px;
    border: 2px solid #ccc;
    border-radius: 5%;
    padding: 20px 0;
    box-sizing: border-box;
    text-align: center;
    font-size: 16px;
    cursor: pointer;
    p:nth-child(n + 2) {
      margin-top: 10px;
    }
    .price {
      font-weight: 700;
      font-size: 35px;
      color: pink;
    }
  }
}
.is-select {
  border: 2px solid pink !important;
}
/deep/.el-input-number {
  width: 90%;
  margin-top: 5px;
}
/deep/.el-input__inner {
  width: 100%;
}
/deep/.el-card__body {
  padding: 30px;
  > div {
    display: flex;
    .vip-box {
      width: 300px;
      height: 145px;
      padding: 15px 10px;
      box-sizing: border-box;
      margin-bottom: 30px;
      border-radius: 3%;
      border: 1px solid #000;
      p:nth-child(n + 2) {
        margin-top: 20px;
      }
      .buy {
        margin-left: 40px;
        color: blue;
      }
      .number {
        padding-left: 35px;
      }
      .goods-number {
        margin: 0 10px;
      }
      .price {
        color: red;
      }
      .el-button {
        width: 100px;
        border-radius: 10%;
        margin-left: 40px;
        font-size: 14px;
      }
    }
    .time {
      color: red;
      margin-top: 15px;
      margin-left: 15px;
    }
  }
}
</style>
